<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>框架</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <LINK href="/resource/web/frame/css/bootstrap.css" rel="stylesheet">
    <LINK href="/resource/web/frame/css/reset.css" rel="stylesheet">
    <LINK href="/resource/web/frame/css/font-awesome.css" rel="stylesheet">
    <LINK href="/resource/web/frame/css/login.css" rel="stylesheet">
    <SCRIPT src="/resource/web/frame/js/jquery-2.1.1.min.js"></SCRIPT>
    <script src="/resource/web/jqueryui/js/jquery.ui.core.js"></script>
    <script src="/resource/web/jqueryui/js/jquery.ui.widget.js"></script>
    <script src="/resource/web/jqueryui/js/jquery.ui.menu.js"></script>
    <script src="/resource/web/jqueryui/js/jquery.ui.autocomplete.js"></script>
    <script src="/resource/web/frame/js/des.js"></script>
</head>
<body>
<div id="loader" class="loader"></div>
<section class="login-main">
    <header class="login-top" id="dvFrameTop">
        <div class="logo">
            <div class="sysChnName">辽宁工程技术大学宿舍管理系统</div>
            <div class="sysEngName">Liaoning Technology University Dormitory Management System</div>
        </div>
        <nav class="login-top-menu">
            <a title="设为首页"  class="top-menu" href="javascript:void(0)">
                <i class="fa fa-cog fa-home"></i>
                <span class="top-menu-text">设为首页</span>
            </a>
            <a title="加入收藏"  class="top-menu" href="javascript:void(0)">
                <i class="fa fa-star"></i>
                <span class="top-menu-text">加入收藏</span>
            </a>
            <a title="帮助中心"  class="top-menu" href="javascript:void(0)">
                <i class="fa fa-question-circle"></i>
                <span class="top-menu-text">帮助中心</span>
            </a>
        </nav>
    </header>
    <section id="ps_container" class="ps_container">
        <div class="ps_image_wrapper">
            <img src="/resource/web/frame/images/bj_1.jpg" alt="" />
        </div>
        <div class="login-image-url"></div>
        <div class="login-form">
            <div class="login-title">
                <%--<form action="/login" method="post" enctype="multipart/form-data">--%>
                    <h2>欢迎登录</h2>
                    <div class="login-item">
                        <input name="name" data-mask="请输入用户名" tabindex="1" class="login-user-name" value="${name}"  id="name"  type="text" />
                    </div>
                    <div class="login-item login-passwd">
                        <input name="password" data-mask="请输入密码" tabindex="1" class="login-user-name" value="${password}" id="password"  type="password" />
                        <a tabindex="6" title="忘记密码？" class="blink" id="forgetpwdmsg" href="#" target="_blank">忘记密码？</a>
                    </div>
                    <div class="login-item secrit" style="display: none">
                        <input name="code" data-mask="请输入验证码" tabindex="5" value="${code}" class="login-identify" type="text"/>
                        <img class="identify-image" style="width:80px" src=""/>
                        <span class="identify-refresh"><a href="#"><i class="fa fa-refresh"></i> 换一张</a></span>
                    </div>
                    <div class="login-item">
                        <input tabindex="5" class="login-btn" type="submit" value="登 录">
                    </div>
                <%--</form>--%>
                <div class="login-more">
                    <div class="wx">
                        <img width="75" height="75" id="yxCode" src="/resource/web/frame/images/ewm.png">
                    </div>
                    <div class="wxjj">
                        <p>微信扫一扫！</p>
                        <p>信息全掌握！</p>
                    </div>

                    <div class="phonedown">
                        <div class="phoneItem title">
                            移动客户端下载
                        </div>
                        <div class="phoneItem android">
                            <i class="fa fa-android m2s5"></i><a href="#">安卓版下载</a>
                        </div>
                        <div class="phoneItem iphone">
                            <i class="fa fa-apple m2s5"></i><a href="#">苹果版下载</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="login-image-btn">
            <a href="javascript:void(0)" class="ps_prev"><i class="fa fa-arrow-circle-o-left"></i></a>
            <a href="javascript:void(0)" class="ps_next"><i class="fa fa-arrow-circle-o-right"></i></a>
        </div>
        <ul class="ps_nav" style="display:none">
            <li class="selected"><a href="/resource/web/frame/images/bj_1.jpg" rel="/resource/web/frame/images/thumbs/1.jpg">Image 1</a></li>
            <li><a href="/resource/web/frame/images/bj_2.jpg" rel="/resource/web/frame/images/thumbs/2.jpg">Image 2</a></li>
            <li><a href="/resource/web/frame/images/bj_3.jpg" rel="/resource/web/frame/images/thumbs/3.jpg">Image 3</a></li>
        </ul>
    </section>
    <footer class="login-foot">
        <p>商家入驻| 销售联盟| 联系我们| 企业大客户| 用户体验改进计划| 友情链接| 手机国美| 热门搜索| 商品专题 </p>
        <p>©2000-2014 辽宁工程技术大学软件学院  汇智优软 版权所有 </p>
    </footer>

</section>
<script type="text/javascript">
    /*
     the images preload plugin
     */
    (function($) {
        $.fn.preload = function(options) {
            var opts 	= $.extend({}, $.fn.preload.defaults, options),
                    o		= $.meta ? $.extend({}, opts, this.data()) : opts;
            return this.each(function() {
                var $e	= $(this),
                        t	= $e.attr('rel'),
                        i	= $e.attr('href'),
                        l	= 0;
                $('<img/>').load(function(i){
                    ++l;
                    if(l==2) o.onComplete();
                }).attr('src',i);
                $('<img/>').load(function(i){
                    ++l;
                    if(l==2) o.onComplete();
                }).attr('src',t);
            });
        };
        $.fn.preload.defaults = {
            onComplete	: function(){return false;}
        };

        $(".identify-refresh").click(function(){
            $(".identify-image").attr("src","/code/get");
        }).trigger("click");

        $(".login-identify").autocomplete({
            source: function( request, response ) {
                var secCode = $(".login-identify").val();
                $.ajax({
                    url: "/code/validate/"+secCode,
                    type:"get",
                    success: function( data ) {
                        if(data){
                            $(".ui-autocomplete-loading").removeClass("background");
                        }else{
                            $(".ui-autocomplete-loading").css("background","/resource/web/frame/images/next.png");
                        }
                    }
                });
            },
            minLength: 4,
            select: function( event, ui ) {
                alert(event);
            },
            open: function() {
            },
            close: function() {
            }
        });

        $(".login-btn").click(function(){
            var p = $("#password").val();
            var n = $("#name").val();
            var secCode = $(".login-identify").val();
            $.ajax({
                url:"/validate",
                type:"post",
                data:"name="+n+"&password="+p+"&code="+secCode,
                success:function(data){
                    if(data && !data.FAILED){document.location.href = "/home";}else{var failCnt=data.SESSION_LOGIN_FAIL_CNT;if(failCnt > 2){$(".secrit").show();}}
                }
            });
        })
    })(jQuery);
</script>
<script type="text/javascript">
    $(function() {

        //some elements..
        var $ps_container		= $('#ps_container'),
                $ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
                $ps_next			= $ps_container.find('.ps_next'),
                $ps_prev			= $ps_container.find('.ps_prev'),
                $ps_nav				= $ps_container.find('.ps_nav'),
                $links				= $ps_nav.children('li'),
                total_images		= $links.length,
                currentHovered		= -1,
                current				= 0,
                $loader				= $('#loader');
        var loaded	= 0;
        $links.each(function(i){
            var $link 	= $(this);
            $link.find('a').preload({
                onComplete	: function(){
                    ++loaded;
                    if(loaded == total_images){
                        $loader.hide();
                        $ps_container.show();
                        $links.bind('click',showImage);
                        $ps_next.bind('click',nextImage);
                        $ps_prev.bind('click',prevImage);
                    }
                }
            });
        });
        function showImage(e){
            var $link				= $(this),
                    idx					= $link.index(),
                    $image				= $link.find('a').attr('href'),
                    $currentImage 		= $ps_image_wrapper.find('img'),
                    currentImageWidth	= $currentImage.width();
            if(current == idx) return false;
            var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
                    .attr('src',$image);
            if($ps_image_wrapper.children().length > 1)
                $ps_image_wrapper.children(':last').remove();
            $ps_image_wrapper.prepend($newImage);
            var newImageWidth	= $newImage.width();
            if(current > idx){
                $newImage.css('left',-newImageWidth + 'px');
                currentImageWidth = -newImageWidth;
            }
            current = idx;
            $ps_image_wrapper.stop().animate({
                width	: newImageWidth + 'px'
            },350);
            $newImage.stop().animate({
                left	: '0px'
            },350);
            $currentImage.stop().animate({
                left	: -currentImageWidth + 'px'
            },350);

            e.preventDefault();
        }

        function nextImage(){
            if(current == total_images - 1){
                current = -1
            }
            $links.eq(current+1).trigger('click');
        }
        function prevImage(){
            if(current == 0){
                current = total_images;
            }
            $links.eq(current-1).trigger('click');
        }
        setInterval(nextImage, 5000);
    });
</script>

</body>
</html>